<!DOCTYPE html>
<html lang="utf-8">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        background: #e6e6e6;
      }

      .container {
        position: relative;
      }

      #item-left,
      #item-right {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background: #2ecc71;
      }

      #item-right {
        left: 50%;
      }

      .controller {
        position: absolute;
        z-index: 1000;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        background: #3498db;
        cursor: se-resize;
        font-size: 0px;
      }

      .test1 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: pink;
      }

      .l,
      .r {
        float: left;
        width: 50%;
        height: 100%;
        background-color: red;
      }

      .r {
        background-color: #2ecc71;
      }

      .full-r .l {
        width: 0;
      }

      .full-r .r {
        width: 100%;
      }
    </style>

    <!--<div class="container">
    <div class="container-left">
        <div id="item-left">
            <div id="controller-left" class="controller"></div>
        </div>
    </div>
    <div class="container-right">
        <div id="item-right">
            <div id="controller-right" class="controller"></div>
        </div>
    </div>
</div>-->
    <div class="test1">
      <!--    <div class="l"></div>-->
      <div class="r"></div>
    </div>

    <script>
      // https://blog.crimx.com/2017/07/15/element-onresize/
      var left = document.getElementById('item-left');
      var right = document.getElementById('item-right');
      var controllerLeft = document.getElementById('controller-left');
      var controllerRight = document.getElementById('controller-right');

      /*
onElResize(left, function () {
    right.style.width = left.offsetWidth + 'px';
    right.style.height = left.offsetHeight + 'px';
});

onElResize(right, function () {
    left.style.width = right.offsetWidth + 'px';
    left.style.height = right.offsetHeight + 'px';
});
*/

      const test1 = document.querySelector('.test1');
      const r = document.querySelector('.r');
      onElResize(r, function () {});
      test1.addEventListener('click', () => {
        if (Array.prototype.includes.call(test1.classList, 'full-r')) {
          test1.classList.remove('full-r');
        } else test1.classList.add('full-r');
      });
      /*
var isLeftMousedown = false;
var isRightMousedown = false;
var lastMouseX = 0;
var lastMouseY = 0;

document.addEventListener('mousemove', function (e) {
    var el;
    if (isLeftMousedown) {
        el = left;
    } else if (isRightMousedown) {
        el = right;
    } else {
        return;
    }

    el.style.width = el.offsetWidth + e.clientX - lastMouseX + 'px';
    el.style.height = el.offsetHeight + e.clientY - lastMouseY + 'px';

    lastMouseX = e.clientX;
    lastMouseY = e.clientY;
});

controllerLeft.addEventListener('mousedown', function (e) {
    e.preventDefault();
    lastMouseX = e.clientX;
    lastMouseY = e.clientY;
    isLeftMousedown = true;
    left.style.willChange = 'width,height';
});

controllerRight.addEventListener('mousedown', function (e) {
    e.preventDefault();
    lastMouseX = e.clientX;
    lastMouseY = e.clientY;
    isRightMousedown = true;
    right.style.willChange = 'width,height';
});

document.addEventListener('mouseup', function () {
    isLeftMousedown = false;
    isRightMousedown = false;
    left.style.willChange = '';
    right.style.willChange = '';
});

//////////\\\///\\\\\\\\\\
*/
      // scroll passive events
      var passiveEvents = false;
      try {
        var opts = Object.defineProperty({}, 'passive', {
          get: function () {
            passiveEvents = { passive: true };
          },
        });
        window.addEventListener('test', null, opts);
      } catch (e) {}

      function onElResize(el, handler) {
        if (!(el instanceof HTMLElement)) {
          throw new TypeError("Parameter 1 is not instance of 'HTMLElement'.");
        }
        // https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements
        if (
          /^(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style|textarea|title)$/i.test(
            el.tagName,
          )
        ) {
          throw new TypeError(
            'Unsupported tag type. Change the tag or wrap it in a supported tag(e.g. div).',
          );
        }
        if (typeof handler !== 'function') {
          throw new TypeError("Parameter 2 is not of type 'function'.");
        }

        var lastWidth = el.offsetWidth || 1;
        var lastHeight = el.offsetHeight || 1;
        var maxWidth = 10000 * lastWidth;
        var maxHeight = 10000 * lastHeight;

        var expand = document.createElement('div');
        expand.className = 'expand';
        expand.style.cssText =
          'position:absolute;top:0;bottom:0;left:0;right:0;z-index=-10000;overflow:hidden;visibility:hidden;';
        var shrink = expand.cloneNode(false);
        shrink.className = 'shrink';

        var expandChild = document.createElement('div');
        expandChild.style.cssText = 'transition:0s;animation:none;';
        var shrinkChild = expandChild.cloneNode(false);

        expandChild.style.width = maxWidth + 'px';
        expandChild.style.height = maxHeight + 'px';
        shrinkChild.style.width = '250%';
        shrinkChild.style.height = '250%';

        expand.appendChild(expandChild);
        shrink.appendChild(shrinkChild);
        el.appendChild(expand);
        el.appendChild(shrink);

        if (expand.offsetParent !== el) {
          el.style.position = 'relative';
        }

        expand.scrollTop = shrink.scrollTop = maxHeight;
        expand.scrollLeft = shrink.scrollLeft = maxWidth;

        var newWidth = 0;
        var newHeight = 0;

        function onResize() {
          if (newWidth !== lastWidth || newHeight !== lastHeight) {
            lastWidth = newWidth;
            lastHeight = newHeight;
            console.log('onResize');
            handler();
          }
        }

        function onScroll() {
          console.log('onScroll');
          newWidth = el.offsetWidth || 1;
          newHeight = el.offsetHeight || 1;
          if (newWidth !== lastWidth || newHeight !== lastHeight) {
            requestAnimationFrame(onResize);
          }
          expand.scrollTop = shrink.scrollTop = maxHeight;
          expand.scrollLeft = shrink.scrollLeft = maxWidth;
        }

        expand.addEventListener('scroll', onScroll, passiveEvents);
        shrink.addEventListener('scroll', onScroll, passiveEvents);
      }
    </script>
  </body>
</html>
